<template>
	<view >
		<!--邀请好友-->
		<view class="share" v-if="inviteShare" @touchmove.stop.prevent="clear">
			<!-- <view style="width: 100%;height: 200rpx;color: #fff;">1111111</view> -->
			<scroll-view scroll-y="true" class="fiximg" :style='{height:inviteheight+"px"}' >
				<image :src="shareimg" mode="widthFix"></image>
			</scroll-view>
			<view class="invitebox" :class="[animation?'moves':'selectedmove']">
				<view class="invitebutton">
					<view class="share-item" @click="sharequn">
						<image src="/static/image/friend.png"></image>
						<text>分享朋友</text>
					</view>
					<view class="share-item" @click="saveimages">
						<image src="/static/image/friendsave.png"></image>
						<text>保存图片</text>
					</view>
					
					<view class="share-item" @click="shareposter">
						<image src="/static/image/quan.png"></image>
						<text>朋友圈</text>
					</view>
				</view>
				
				<view class="cancelshare" @click="hiddenshow">取消</view>
			</view>
		
		</view>
		<view @click="hiddenshow" @touchmove.stop.prevent="clear"  class="marsk" :class="[animation?'opacitytest':'']" v-if="inviteShare"></view>
	</view>
	
</template>

<script>
	/**
	 * 好友邀请组件
	 */
	export default{
		props:{
			inviteShare:{
				type:Boolean,
				default:false,
			},
			inviteheight:{
				type:[String,Number],
				default:1080,
			},
			userinfo:{
				type:Object,
				default:{}
			}
		},
		data(){
			return{
				animation:false,
				shareimg:'',
			}
		},
		watch:{
			inviteShare(value){
				
				if(value){
					if(!this.shareimg){
						this.$HttRequest({
							url: '/promote/shareImg',
							param: ''
						},'GET',true).then((res) => {
							if (res.status === 10000) {
								this.shareimg = res.data
							} else {
								this.$ShowMsg(res.message)
							}
						}).catch((error) => {
							//异常错误
							this.$ShowMsg('statusCode：' + error.errMsg);
						})
					} 
					this.$nextTick(function() {
						setTimeout(() => {
							this.animation = value
						}, 100)
					})
				}
				
			}
		},
		methods:{
			clear(){
				
			},
			//保存图片
			saveimages() {
				let _this = this
				uni.downloadFile({
					url: _this.shareimg,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(ret) {
								_this.$ShowMsg('图片保存相册成功！');
								console.log(ret);
							}
						})
					}
				})
			},
			hiddenshow() {
				//关闭时先播放完动画再隐藏
				this.animation = false;
				this.$nextTick(function() {
					setTimeout(() => {
						uni.$emit('invitemyfriend',false)
					}, 100)
				})
			},
			//分享朋友或群
			sharequn() {
				let _this = this;
				let nickname = this.userinfo.nickname;
				if(nickname.length>=4){
					nickname = nickname.substring(0,4)+'...'
				}
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: getApp().globalData.ruleconfig.domain+"thirdParty/app/invite?state=" + this.userinfo.recommend_id,
					title: "【分享用户@"+nickname+"】领现金",
					summary: "邀请好友参与免费抽奖赚现金，快来祝我一臂之力吧！",
					imageUrl: "https://fission-com.oss-cn-beijing.aliyuncs.com/rg-static/image/logo/72x72.png",
					success: function(res) {
						_this.$ShowMsg('分享朋友朋友或群成功！')
					},
					fail: function(err) {
						console.log(err);
						_this.$ShowMsg('分享朋友失败！')
					}
				});
			},
			//分享到朋友圈
			shareposter() {
				let _this = this;
				uni.share({
					provider: "weixin",
					scene: "WXSenceTimeline",
					type: 2,
					imageUrl: _this.shareimg,
					success: function(res) {
						_this.$ShowMsg('分享朋友圈成功！')
					},
					fail: function(err) {
						console.log(err);
						_this.$ShowMsg('分享朋友圈失败！')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	
	
	/*分享操作*/
	.share {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		position: fixed;
		display: flex;
		justify-content: flex-start;
		align-items: center;	
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		z-index: 999;
		
		.fiximg {
			margin-top: 150rpx;
			width: 90%;
			width: 600rpx;
			image {
				width: 600rpx;
			}
		}
		.invitebox{
			transition-property: transform;
			transition-duration: 0.1s;
			transition-timing-function: cubic-bezier(.5, .49, .57, 1.21);
			width: 100%;
			height: 350rpx;
			background-color: #fff;
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			
			.cancelshare{
				display: flex;
				justify-content: center;
				align-items: center;
				
				width: 80%;
				height: 80rpx;
				font-size: 32rpx;
				border-top: 1rpx solid #e4e4e4;
				padding-top: 10rpx;
				color: #d2d1d1;
				
			}
			
			.invitebutton{
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-bottom: 20rpx;
				.share-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					image{
						height: 110rpx;
						width: 110rpx;
						margin-bottom: 20rpx;
					}
					text{
						color: #303030;
						font-size: 28rpx;
						margin-bottom: 15rpx;
					}
				}
			}
			
		}
	}
	
	//遮罩层
	.marsk {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transition-property: opacity;
		transition-duration: 0.2s;
		opacity: 0;
		z-index: 990;
		background-color: #000;
	}
	
	.opacitytest {
		opacity: 0.5;
	}
	
	.moves {
		transform: translateY(0);
	}
	
	.selectedmove {
		transform: translateY(350rpx);
	}
	
</style>
